a{color:blue;}
hr {border: 1px solid purple; width:25%; }
.button {background-color: #1a1aff; color:white; padding:12px; border-style: none; border-radius: 6px;}
button:hover,input[type=submit]:hover,input[type=button]:hover {cursor: pointer; background-color:#9999ff;}
h1{color:#0000e6; font-size:32px;}
h2{color:#0000b3; font-size:24px;}
h3{color:#0000b1; font-size:16px;}
td,th {padding-right:25px;text-align:center;}
td {padding-bottom:10px;}
.idBtn {width:125px;}

/*use class="no-print" to remove element when printing */
@media print {
	.no-print {
	display: none !important;
	}
}


:root {
    --bg-color: #ffffff;
    --containerbg-color: #ecd8c6;
	--text-color: #222222;
	--subbg-color:#66ffff;
}

[data-theme="dark"] {
    --bg-color: #b3b3b3;
	--containerbg-color: #d2a379;
    --text-color: #eeeeee;
	--subbg-color:#00e6e6;
}

body {background-color:var(--bg-color);}

.container {background-color:var(--containerbg-color); width:98%; margin: auto; font-family: Verdana, sans-serif; font-size:14px; text-align:center;}
.title img {height:32px; padding:16px;}
.mainbody {width:100%; }
.subbody {background-color:var(--subbg-color); width:88%; margin:auto;}


/*Footer */
.footer{font-size:12px;}

/*Privacy & Terms/ Conditions*/
.Policies {text-align:left; width:80%; border: 2px solid black; margin-left:auto; margin-right:auto; padding:50px;}
.Policies p {Text-indent:25px}


.announcement {font-size:24px;font-weight:bold;}
.disclaimer {font-size:12px;}
.subtitle {color:#003399;}
.note {color:#0000cc}
.requiredAsterisk {color:#cc0000; font-size:20px;}
.border {border: 2px solid black;}
.noborder{border-style:none;}
.center {display:inline-block; margin-left:auto; margin-right:auto;}
.err {font-size:28px; font-weight:bold; background-color:#ff9933; color:#e60000; padding:10px;}
.success {font-size:28px; font-weight:bold;}
.red {color:#b30000;}
.hide {display:none;/*visibility: hidden;*/}
.block {display:block; padding:8px;}
.btnShowPass {display:inline-block;}
.littleBtn {font-size:11px; padding:8px;}
.inlineBtn{display:inline-block;}
.wideBtn{width:200px;}
.tabBtn{width:100px;}
.lineHeight {line-height: 1.5;}




/*Style the Password Requirements Message Box*/
/* The message box is shown when the user clicks on the password field */
#passReqMsg {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  left:30px;
  padding: 5px 15px;;
}
.passReqvalid {color: green;}
.passReqinvalid {color: red;}




/*Autocomplete */
.autocomplete {
  position: relative;
  display: inline-block;
}
.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff; 
  border-bottom: 1px solid #d4d4d4; 
  width:150px;
}
/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9; 
}
/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important; 
  color: #ffffff; 
}




.checkbox {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 18px;
  cursor: pointer;
  /*font-size: 22px;*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default checkbox */
.checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom checkbox - checkbox at default*/
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #ffffff;
  border: 4px groove #cce0ff;
}
/* On mouse-over, add a background color */
.checkbox:hover input ~ .checkmark {
  background-color: #cce0ff;
}
.checkbox input:focus-within ~ .checkmark {
	/*border: 8px groove green;*/
}
/* When the checkbox is checked, add a background */
.checkbox input:checked ~ .checkmark {
  background-color: #3333ff;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;

}
/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
  display: inline-block;
}
/* Style the checkmark/indicator */
.checkbox .checkmark:after {
  left: 4px;
  top: 2px;
  width: 5px;
  height: 7px;
  border: solid white; /*change checkmark color*/
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}




/*Customize the Radio Button*/
/* Customize the label (the container) */
.radioContainer {
  display: inline-block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.radioContainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
/* Create a custom radio button */
.radiocheckmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.radioContainer:hover input ~ .radiocheckmark {
  background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.radioContainer input:checked ~ .radiocheckmark {
  background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.radiocheckmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the indicator (dot/circle) when checked */
.radioContainer input:checked ~ .radiocheckmark:after {
  display: block;
}
/* Style the indicator (dot/circle) */
.radioContainer .radiocheckmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}




/*Customize the Input Date*/
input[type="date"] {
  /* General styles */
  appearance: none; /* Removes default browser styling for more control */
  -webkit-appearance: none; /* For older Chrome/Safari versions */
  color: #333;
  font-size: 16px;
  border:3px groove #cce0ff;
  background-color: #f9f9f9;
  padding: 5px;
  border-radius: 4px;
  box-shadow: none;
}
input[type="date"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}




/*Nav Button*/
.nav {position:sticky; top:10px;  margin-left:8px; text-align:left;}
.navbox {display:inline-block; width:70px;}
.navBtn {
  display:inline-block;
  border: none;
}
.navContent {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 300px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.navContent a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Show the dropdown menu on hover */
.navbox:hover .navContent {display:block; cursor: pointer;}
/* Change color of dropdown links on hover */
.navContent a:hover {background-color: #ddd;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.nav:hover .dropBtn {background-color: #3e8e41; }




/*Tab Menus*/
/* Style the tab */
.tab {
  overflow: hidden;
}
/* Style the buttons that are used to open the tab content */
.tab button {
	border: 2px groove black;
	padding: 12px 24px;
}
/* Style the tab content */
.tabcontent {
  display: none;
  
}




/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  opacity: 1;
  transition: opacity 0.5s ease; /*fade after a duration set by javascript*/
}
.modal-fade-out {
  opacity: 0;
}
/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 10px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.modal-close {
  color: #aaa;
  float: right;
  font-weight: bold;
}
.modal-close:hover, .close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}


/*open/ collapse divs "arrow"*/
.updownArrow{
    display: inline-block;
    transition: transform 0.2s ease;
}
.updownArrow.rotate{
    transform: rotate(180deg);
}



/*cookie disclaimer*/
.cookie-toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 15px;
    background: #333;
    color: white;
    padding: 12px 15px 12px 20px;
    border-radius: 5px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.5s ease;
}
.cookie-toast.hidden {
    opacity: 0;
    pointer-events: none;
}
.cookie-toast-close {
    border: none;
    background: transparent;
    color: white;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0 3px;
}
.cookie-toast-close:hover {
    opacity: 0.7;
}





/*Form Formatting*/
.rowA {border: 8px groove #80b3ff; background-color:#00e6e6;}
.row {border: 2px solid #80b3ff; padding:8px; }
.form-block-label {display:inline-block; width:34%; text-align:right; vertical-align:top;}
.form-block-input {display:inline-block; width:64%; text-align:left;}
.form-input, .custom-select {border:3px groove #cce0ff;  padding:5px; border-radius: 4px; height:15px; width:50%; }
.custom-select, .form-input-time {height:30px; cursor: pointer;}
.form-input:hover, .form-input:focus, .checkbox input:focus-within ~ .checkmark, .custom-select:hover, .form-input-time:hover {border: 3px solid #007bff;}
.form-input-time {width:50px; text-align:center;}
.form-centerblock {margin-left:5%; display:inline-block;  text-align:left; line-height:1.5;}



/*Home Profile*/
.block-label {display:inline-block; width:49%; text-align:right; vertical-align:top;}
.block-input {display:inline-block; width:49%; text-align:left;}